<template>
  <ShowCard>
    <template #title>
      <div class="text-xl">
        <p class="font-mono">歌单推荐</p>
      </div>
    </template>
    <template #subtitle>
      <div>
        <div class=" bg-gray-200 text-sm w-20 h-8 leading-8 rounded-xl">
          <button @click="toMusicList" class="ml-3">显示全部</button>
        </div>
      </div>
    </template>
    <template #content>
      <div class="flex flex-wrap mt-4 pt-4 rounded-lg" style="background-color:var(--showbox);">
        <div v-for="item, index in MusicList.Box" class="w-[20%]" :key="index">
          <HomeMusicListCard :title="item.name" :cover="item.cover" :_id="item._id" class="mt-3 ml-5" />
        </div>
      </div>
    </template>
  </ShowCard>
</template>
<script setup lang="ts">
interface props {
  _id: string,
  name: string,
  cover: string,
}
const router = useRouter();
const MusicList = defineProps<{ Box: props[] }>();

const toMusicList = function () {
  router.push('./musicList')
}
</script>
<style lang="less" scoped></style>
